<template>
	<view>
		<view class="header" :style="{top:top+'px',height:height+'px',width:  width+'px' }">

			<view class="icon" @click="goBack">
				<u-icon name="arrow-left" color="#FFFFFF" size="22"></u-icon>
			</view>

			<view class="icon" @click="goHome">
				<u-icon name="home-fill" color="#FFFFFF" size="22"></u-icon>
			</view>
			<!-- <view class="header-tab">
				<view class="header-tab-item header-tab-item-ac">教练人气榜</view>
				<view class="header-tab-item">场地人气榜</view>
			</view> -->
			<view class="coach-header-select" @click="open">
				{{params.PositioningCity || '同城'}}
				<image :src="ossUrl + `/static/popularityChart/3.png`" mode=""></image>
			</view>
		</view>
		<view class="bg">
			<image :src="getBgImg" mode="widthFix"></image>
		</view>
		<swiper class="swiper" @change="change" previous-margin="110rpx" next-margin="110rpx">
			<swiper-item v-for="it in thecharts_all">
				<view class="swiper-img">
					<image :src="it.characters" mode="widthFix" style="padding-top: 120rpx;"></image>
				</view>
			</swiper-item>
		</swiper>
		<scroll-view scroll-y="true" class="scroll-Y" @scrolltolower="onReachBottomReset">
			<view class="coach-title">人气榜</view>
			<view class="coach-card">
				<view class="coach-card-item coach-card-item1">
					<template v-if="listTwo">
						<view class="coach-card-item-img"
							@click="toMixinIndex(3,{business_card_id: listTwo.business_card_id})">
							<image :src="ossUrl + `/static/popularityChart/5.png`" mode="aspectFill"
								class="coach-card-item-img-bg"></image>
							<image :src="listTwo.head" mode="" class="coach-card-item-img-avatar"></image>
						</view>
						<view class="coach-card-item-footer">
							<view class="coach-card-item-footer-num">人气值:&nbsp;{{listTwo.visits || ''}}</view>
							<view class="coach-card-item-footer-name">{{listTwo.nickname || ''}}</view>
						</view>
					</template>
				</view>
				<view class="coach-card-item coach-card-item2">
					<template v-if="listOne">
						<view class="coach-card-item-img"
							@click="toMixinIndex(3,{business_card_id: listOne.business_card_id})">
							<image :src="ossUrl + `/static/popularityChart/4.png`" mode="aspectFill"
								class="coach-card-item-img-bg"></image>
							<image :src="listOne.head" mode="" class="coach-card-item-img-avatar"></image>
						</view>
						<view class="coach-card-item-footer">
							<view class="coach-card-item-footer-num">人气值: &nbsp;{{listOne.visits || ''}}</view>
							<view class="coach-card-item-footer-name">{{listOne.nickname || ''}}</view>
						</view>
					</template>
				</view>
				<view class="coach-card-item coach-card-item3">
					<template v-if="listThree">
						<view class="coach-card-item-img "
							@click="toMixinIndex(3,{business_card_id: listThree.business_card_id})">
							<image :src="ossUrl + `/static/popularityChart/6.png`" mode="aspectFill"
								class="coach-card-item-img-bg"></image>
							<image :src="listThree.head" mode="" class="coach-card-item-img-avatar"></image>
						</view>
						<view class="coach-card-item-footer">
							<view class="coach-card-item-footer-num">人气值:&nbsp;{{listThree.visits || ''}}</view>
							<view class="coach-card-item-footer-name">{{listThree.nickname || ''}}</view>
						</view>
					</template>
				</view>
			</view>
			<view class="table">
				<view class="table-th">
					<view class="table-th-num">排名</view>
					<view class="table-th-tx">姓名/职称/公司</view>
					<view class="table-th-rq">人气值</view>
				</view>
				<view class="list">
					<view class="list-item" v-for="(it,index) in list"
						@click="toMixinIndex(3,{business_card_id: it.business_card_id})">
						<view class="list_item">
							<view class="list_item-num">{{index + 4}}</view>
							<image class="list_item-img" :src="it.head" style="border-radius: 50%;" mode="aspectFill">
							</image>
							<view class="list_item-content">
								<view class="list_item-content-h">
									<view class="list_item-content-h-name">
										{{it.nickname}}
										<image :src="ossUrl + `/static/setting/${it.sex === '女' ? '7' : '6'}.png`"
											mode=""></image>
										<iconVue :permission="it" />
										<!-- <image src="https://cos.golfren.vip/wx-mini/static/i1.png" mode="" style="border-radius: 50%;margin-left: 10rpx;" v-if="it.creator === 1"></image>
										<image src="https://cos.golfren.vip/wx-mini/static/i2.png" mode="" style="border-radius: 50%;margin-left: 10rpx;" v-if="it.shopping_mall === 2"></image> -->
									</view>
									<view class="list_item-content-h-address">
										<image :src="ossUrl + `/static/card/2.png`" mode=""></image>
										{{it.address || ''}}
									</view>
								</view>
								<view class="list_item-content-subTitle">
									{{it.name}}

								</view>
								<view class="list_item-content-address">{{it.company}}</view>
							</view>
							<view class="list_item-rig">
								{{it.visits || ''}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>

		<Search ref="SearchRef" :searchInfo="searchInfo" @submit="submit" :type="2" canclxeTx="同城" />
	</view>
</template>

<script>

	import {
		InformationRankingList,
		InformationScreen,
		InformationUserInfo,
		InformationBusinessCard
	} from '@/common/http/api.js'
	import Search from '@/pages/card/components/search.vue'
	import iconVue from '@/pagesA/components/icon/icon.vue'
	export default {
		components: {
		
			Search,
			iconVue
		},
		data() {
			return {
				top: 0,
				height: 0,
				right: 15,
				width: 0,
				params: {
					PositioningCity: '',
					// type: 1,
					circle_id: ''
				},
				isList: true,
				list: [],
				thecharts_all: [],
				listOne: '',
				listTwo: '',
				listThree: '',
				searchInfo: '',
				userInfo: '',
				current: 0
			};
		},
		created() {
			// 获取胶囊按钮的位置信息
			let menuButtonRect = wx.getMenuButtonBoundingClientRect();

			this.top = menuButtonRect.top

			this.height = menuButtonRect.height

			this.width = menuButtonRect.left



		},
		computed: {
			getBgImg() {
				return this.thecharts_all[this.current]?.background ?? ''
			}
		},
		onLoad(e) {

			InformationUserInfo().then(res => {
				this.userInfo = res.data

			})
			InformationBusinessCard().then(res => {
				if (e.circle_id && e.circle_id > 0) {
					this.params.circle_id = e.circle_id
				} else {
					this.params.circle_id = res.data.circle_id
				}

				this.init()

			})

		},
		onShareAppMessage() {
			console.log('分享', this.$store.state)
			let img = ''
			let title = ''
			let path = '/pagesA/popularityChart/popularityChart?userId=' + this.userInfo.id + '&type=2&circle_id=' + this
				.params.circle_id
			if (this.isValid(this.$store.state.share.share_title)) {
				title = this.$store.state.share.share_title
				//img = this.$store.state.share.share_img
			}

			return {
				title,
				path,
				imageUrl: img
			};
		},
		// onShareTimeline() {
		// 	console.log('分享', this.$store.state)
		// 	let img = ''
		// 	let title = ''
		// 	let path = '/pagesA/popularityChart/popularityChart?userId=' + this.userInfo.id + '&type=2'
		// 	if (this.isValid(this.$store.state.share.share_title)) {
		// 		title = this.$store.state.share.share_title
		// 		//img = this.$store.state.share.share_img
		// 	}

		// 	return {
		// 		title,
		// 		path,
		// 		imageUrl: img
		// 	};
		// },
		onAddToFavorites() {
			console.log('分享', this.$store.state)
			let img = ''
			let title = ''
			let path = 'is_mixin_collect=4&userId=' + this.userInfo.id + '&type=2'
			if (this.isValid(this.$store.state.share.share_title)) {
				title = this.$store.state.share.share_title
				//img = this.$store.state.share.share_img
			}

			return {
				title,
				query: path,
				imageUrl: img
			};
		},
		methods: {
			submit(params) {
				console.log('params', params)
				//let p = JSON.parse(JSON.stringify(params))
				let name = ''
				if (params.PositioningCity) {
					name = this.searchInfo.positioning_city.find(i => params.PositioningCity == i.id).name
				} else {
					name = ''
				}

				this.params.PositioningCity = name
				this.init()
			},
			open() {
				this.$refs.SearchRef.show()
			},


			onReachBottomReset() {
				// console.log('触底')
				// if (this.isList) {
				// 	this.params.page++
				// 	this.init()
				// }
			},
			init() {
				this.list = []
				this.listOne = ''
				this.listTwo = ''
				this.listThree = ''
				uni.showLoading()

				InformationRankingList(this.params).then(res => {
					uni.hideLoading()


			


					this.thecharts_all = res.data.thecharts_all
					let list = this.thecharts_all[this.current].list
					InformationScreen({
						type: 4,
						circle_id: this.params.circle_id,
						thecharts_id:this.thecharts_all[this.current].id
					}).then(res => {
						this.searchInfo = res.data
					})
					if (Array.isArray(list) && list.length > 0) {

						if (list.length > 0) {
							this.listOne = list[0]
						}
						if (list.length > 1) {
							this.listTwo = list[1]
						}
						if (list.length > 2) {
							this.listThree = list[2]
						}

						if (list.length > 0) {
							const slicedArr = list.filter((value, index) => index >= 3);
							this.list = slicedArr
						}


					}
				})
			},
			change(e) {
                 this.params.PositioningCity=''
				this.current = e.detail.current
				this.reload()
			},
			reload() {
				this.params.page = 1
				this.init()
			},
			goBack() {
				uni.navigateBack()
			},
			goHome() {
				uni.switchTab({
					url: "/pages/index/index"
				})
			}

		}
	}
</script>

<style lang="scss">
	page {
		background: #F6F7F8;
	}

	.swiper {
		width: 100vw;
		height: 400rpx;
	}

	.scroll-Y {
		position: fixed;
		top: 380rpx;
		height: calc(100vh - 380rpx);
		width: 100%;
		// background: white;
		// border-top-left-radius: 20rpx;
		// border-top-right-radius: 20rpx;
	}

	image {
		width: 100%;
		height: 100%;
	}

	.swiper-item {
		width: 100vw;
		//height: 100vh;

	}

	.swiper-img {
		width: 100%;
		height: 400rpx;
		display: flex;

		image {
			margin: auto;
			width: 450rpx;

		}
	}

	.bg {
		width: 100%;
		height: 400rpx;
		// background: red;
		position: absolute;
		top: 0;
		left: 0;
	}

	.header {
		position: fixed;
		left: 0;
		display: flex;
		box-sizing: border-box;
		padding-left: 30rpx;
		z-index: 999;
		align-items: center;

		.header-tab {
			flex: 1;
			margin: 0 30rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.header-tab-item {
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 28rpx;
				color: #FFFFFF;
			}

			.header-tab-item:first-child {
				margin-right: 30rpx;
			}

			.header-tab-item-ac {
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 28rpx;
				color: #FFFFFF;
				position: relative;
			}

			.header-tab-item-ac::after {
				content: "";
				width: 100%;
				height: 8rpx;
				background: #12B475;
				border-radius: 3rpx;
				position: absolute;
				bottom: -10rpx;
				left: 0;
				z-index: 3;
			}
		}
	}

	.coach-header-select {
		width: 124rpx;
		height: 50rpx;
		background: rgba(0, 0, 0, 0.3);
		border-radius: 25rpx;
		margin-left: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-family: PingFang SC;
		font-weight: 300;
		font-size: 24rpx;
		color: #FFFFFF;

		image {
			width: 17rpx;
			height: 8rpx;
			margin-left: 10rpx;
		}
	}

	.bg {
		width: 100vw;
	}

	.coach-title {
		width: 690rpx;
		margin: 0 auto;
		font-family: PingFang SC;
		font-weight: bold;
		font-size: 28rpx;
		color: #FFFFFF;
		margin-bottom: 23rpx;
	}

	.coach-card {
		width: 690rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin: 0 auto;
		display: flex;
		align-items: center;
		padding: 30rpx 0;
		margin-bottom: 50rpx;

		.coach-card-item {
			width: 220rpx;
			box-sizing: border-box;

			.coach-card-item-img {
				width: 100%;
				height: 192rpx;
				position: relative;
				display: flex;
				align-items: flex-end;
				margin-bottom: 22rpx;

				.coach-card-item-img-bg {
					width: 100%;
					height: 100%;
				}

				.coach-card-item-img-avatar {
					position: absolute;
					top: 17rpx;
					left: 45rpx;
					width: 129rpx;
					height: 129rpx;
					border-radius: 50%;
				}
			}
		}

		.coach-card-item1 {

			.coach-card-item-img {
				transform: scale(0.7) translateY(45rpx);
			}
		}

		.coach-card-item3 {

			.coach-card-item-img {
				transform: scale(0.8) translateY(30rpx);
			}
		}

		.coach-card-item-footer {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;

			.coach-card-item-footer-num {
				font-family: PingFang SC;
				font-weight: 300;
				font-size: 24rpx;
				color: #131313;
				margin-bottom: 21rpx;
			}

			.coach-card-item-footer-name {
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 24rpx;
				color: #484848;
			}
		}
	}

	.table {
		width: 100%;

		.table-th {
			margin-bottom: 31rpx;
			display: flex;
			align-items: center;

			.table-th-num {
				width: 99rpx;
				text-align: center;
				font-family: PingFang SC;
				font-weight: 300;
				font-size: 24rpx;
				color: #666666;
			}

			.table-th-tx {
				padding-left: 11rpx;
				flex: 1;
				min-width: 0;
				font-family: PingFang SC;
				font-weight: 300;
				font-size: 24rpx;
				color: #666666;
			}

			.table-th-rq {
				width: 130rpx;
				font-family: PingFang SC;
				font-weight: 300;
				font-size: 24rpx;
				color: #666666;
			}
		}
	}

	.list {
		width: 100%;
		background: #FFFFFF;

		.list-item {
			width: 100%;
			margin-bottom: 10rpx;
			border-bottom: 10rpx solid #eee;

			.list_item {
				box-sizing: $uni-bg-color;
				padding: 39rpx 0;
				display: flex;
				align-items: center;

				.list_item-num {
					width: 100rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-family: PingFang SC;
					font-weight: 300;
					font-size: 24rpx;
					color: #12B475;
				}

				.list_item-img {
					width: 90rpx;
					height: 90rpx;
					margin-right: 20rpx;
				}

				.list_item-content {
					flex: 1;
					min-width: 0;

					.list_item-content-h {
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-bottom: 16rpx;

						.list_item-content-h-name {
							display: flex;
							align-items: center;
							font-family: PingFang SC;
							font-weight: bold;
							font-size: 30rpx;

							image {
								margin-left: 14rpx;
								width: 26rpx;
								height: 26rpx;
							}
						}

						.list_item-content-h-address {
							display: flex;
							align-items: center;
							font-family: PingFang SC;
							font-weight: 300;
							font-size: 24rpx;
							color: #7A7A7A;

							image {
								margin-right: 10rpx;
								width: 30rpx;
								height: 30rpx;
							}
						}
					}

					.list_item-content-subTitle {
						font-family: PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #666666;
						display: flex;
						align-items: center;
						margin-bottom: 17rpx;

						text {
							font-family: PingFang SC;
							font-weight: 400;
							font-size: 22rpx;
							color: #12B475;
							margin-left: 36rpx;
						}
					}

					.list_item-content-address {
						min-width: 0;
						font-family: PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #666666;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						//height: 23rpx;
					}
				}

				.list_item-rig {
					width: 130rpx;

					display: flex;
					align-items: center;
					padding-left: 25rpx;

					&>view {
						display: flex;
						align-items: center;
						justify-content: center;
						flex-direction: column;
						font-family: PingFang SC;
						font-weight: 400;
						font-size: 20rpx;
						color: #131313;

						image {
							margin-bottom: 18rpx;
							width: 38rpx;
							height: 38rpx;
						}
					}
				}
			}
		}
	}
</style>